import React from 'react'
import { StyleSheet, Image, TouchableOpacity } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'

const TITLE_OFFSET = px2dp(150)

// 返回键的基础样式
const styles = StyleSheet.create({
  backTouch: {
    justifyContent: 'center',
    alignItems: 'center',
    width: px2dp(90),
    height: '100%'
  },
  backImg: {
    width: px2dp(30),
    height: px2dp(30),
    tintColor: '#28acff'
  }
})

/**
 * 默认的stack导航器的总体的参数
 */
const defaultStackOptions = ({ navigation }) => {
  return {
    headerLeft: (
      <TouchableOpacity
        style={styles.backTouch}
        onPress={() => {
          // if (navigation.getParam('backtoroot', false)) {
          //   NavigationService.popToTop()
          // } else
          if (navigation.getParam('isRoot', false)) {
            navigation.dismiss()
          } else {
            navigation.goBack()
          }
        }}
      >
        <Image
          style={styles.backImg}
          source={require('../../assets/img/back.png')}
        />
      </TouchableOpacity>
    ),
    headerStyle: {
      // 标题栏样式，前两句去除安卓的阴影
      shadowOpacity: 0,
      elevation: 0,
      borderBottomColor: '#eeeeee',
      borderBottomWidth: 1,
      backgroundColor: '#ffffff'
      // backgroundColor: 'red'
    },
    headerTitleStyle: {
      flex: 1,
      textAlign: 'center',
      alignSelf: 'center',
      fontWeight: 'normal'
      // backgroundColor: '#cccccc'
    },
    headerTitleContainerStyle: {
      left: TITLE_OFFSET,
      right: TITLE_OFFSET
    }
  }
}

/**
 * 单页面中获取标准的导航器样式
 *
 * @param {Object} {navigation} 导航
 * @param {Object} options 一些导航器的参数
 */
function getTitleBarOptions ({ navigation }, options) {
  // 设置标题，如果跳转传参带了标题则以传参为准
  options = options || {}
  let pageTitle = navigation.getParam('title', '')
  if (pageTitle) {
    options.headerTitle = pageTitle
  }
  return options
}

export { getTitleBarOptions, defaultStackOptions }
